<template>
	<div>
		<div class="box">
			<van-icon name="arrow-left" @click="fanhui"/>
			<van-search
				placeholder="雅诗兰黛" 
				v-model="value"
				shape="round"
			/>
			  <div slot="action" @click="onSearch">搜索</div>
			</van-search>
		</div>
		
		<van-tabs v-model="active" sticky :offset-top="40">
		  <van-tab title="搜索">
			  <p>热门搜索：</p>
			  <van-button icon="fire" @click="fashion">面膜</van-button>
			  <van-button icon="fire" @click="fashion">雅诗兰黛</van-button>
			  <van-button icon="fire" @click="fashion">爽肤水</van-button>
			  <van-button icon="fire" @click="fashion">防晒</van-button>
			  <p>历史搜索：</p>
			  <p>暂无历史搜索</p>
		  </van-tab>
		  <van-tab title="分类">
			  <van-tree-select
			    :items="items"
			    :active-id.sync="activeId"
			    :main-active-index.sync="activeIndex" 
				height="484">
				<template slot="content">
					<van-grid :border="false" :column-num="3" v-if="activeIndex === 0">
					  <van-grid-item>
					    <img src="../assets/fenlei.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei2.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei4.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
						<img src="../assets/fenlei5.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
						<img src="../assets/fenlei6.jpg" @click="fashion" />
					  </van-grid-item>
					</van-grid>
					
					<van-grid :border="false" :column-num="3" v-if="activeIndex === 1">
					  <van-grid-item>
					    <img src="../assets/fenlei.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei2.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei3.jpg" @click="fashion" />
					  </van-grid-item>
					</van-grid>
					
					<van-grid :border="false" :column-num="3" v-if="activeIndex === 2">
					  <van-grid-item>
					    <img src="../assets/fenlei2.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei5.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei4.jpg" @click="fashion" />
					  </van-grid-item>
					</van-grid>
					
					<van-grid :border="false" :column-num="3" v-if="activeIndex === 3">
					  <van-grid-item>
					    <img src="../assets/fenlei5.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei6.jpg" @click="fashion" />
					  </van-grid-item>
					  <van-grid-item>
					    <img src="../assets/fenlei.jpg" @click="fashion" />
					  </van-grid-item>
					</van-grid>
				  </template>
			   </van-tree-select>
		  </van-tab>
		  <van-tab title="品牌">
			  <van-index-bar>
			    <van-index-anchor index="A" />
			    <van-cell title="AFU(阿芙)"  @click="fashion"/>
			    <van-cell title="Artistry(雅姿)"  @click="fashion"/>
			    <van-cell title="AHAVA(圣爱)"  @click="fashion"/>
			  
			    <van-index-anchor index="B" />
			    <van-cell title="Biotherm(碧欧泉)" @click="fashion"/>
			    <van-cell title="Bliss，CLARINS(娇韵诗)" @click="fashion"/>
			    <van-cell title="Bourjois(妙巴黎)" />
			  
				<van-index-anchor index="C" />
				<van-cell title="Chanel(香奈儿)" @click="fashion"/>
				<van-cell title="Clinique(倩碧)" @click="fashion"/>
				<van-cell title="Christian Dior(迪奥)" @click="fashion"/>
				
				<van-index-anchor index="D" />
				<van-cell title="Dr.Ci:Labo(城野医生)" @click="fashion"/>
				<van-cell title="Devi(黛妃)" @click="fashion"/>
				<van-cell title="Dior(迪奥)" @click="fashion"/>
				
				<van-index-anchor index="E" />
				<van-cell title="Eisenberg(伊诗贝格)" />
				<van-cell title="Elizabeth Arden(伊丽莎白.雅顿)" />
				<van-cell title="Eau Ravie(奥尔莱薇)" />
				
				<van-index-anchor index="F" />
				<van-cell title="Freeplus(芙丽芳丝)" />
				<van-cell title="Fasio(高丝菲希欧)" />
				<van-cell title="Fainlise(芬琳思)" />
			  </van-index-bar>
		  </van-tab>
		</van-tabs>
		
	</div>
</template>

<script>
	export default{
		name:'Fenlei',
		data(){
			return{
				value:'',
				active:1,
				items:[
					{text:'彩妆类'},{text:'面部护肤'},{text:'身体护理类'},{text:'母婴类'},{text:'香氛'},{text:'男士护理'},{text:'美容工具'},{text:'日用家居'},{text:'服饰配件'},{text:'营养保湿'}
				],
				activeId:1,
				activeIndex:0,
			}
		},
		methods:{
			onSearch(){
				this.$router.push('/search')
			},
			fanhui(){
				this.$router.push('/home')
			},
			fashion(){
				this.$router.push('/fashion')
			}
		},
		mounted() {
			this.active=this.$route.query.id
			console.log(this.$route.query.id)
		}
	}
</script>

<style scoped="">
	.box{
		display: flex;
		justify-content: space-around;
		height: 40px;
		width: 100%;
		line-height: 40px;
		border-bottom: 1px solid #efefef;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background: #fff;
	}
	.icon-liebiao{
		font-size: 16px;
		margin-left: 13px;
	}
	.van-icon-arrow-left:before{
		line-height: 40px;
		font-size: 14px
	}
	.box div{margin-right: 2px;}
	.van-search{
		padding: 0;
	}
	.van-search__content{
		width: 238px;
		height: 25px;
	}
	.van-tabs{
		margin-top: 40px;
	}
	.van-tree-select__nav,.van-tree-select__content{
		overflow: initial;
	}
	body,html{height: 100%;}
	.van-tree-select{
		height: 100%;
	}
	button{
	  width:84px;
	  height:20px;
	  background: #eff3f6;
	  padding-left:10px;
	  color: #9ca1a4;
	  border: 0;
	  margin:0 10px 10px;
	  border-radius:10px;
	  font-size: 10px;
	  line-height: 20px;
	}
	.van-icon{
		color: #df6770;
	}
	p{
		margin-left: 10px;
	}
	img{width: 20px;height: 48px;}
</style>
